<template>
	<view class="page">
		<!-- title:页面标题
			isBack：返回按键 需要传true 默认不显示
		-->
		<back :isBack="true" :title="'我的订单'"></back>

		<!-- 订单选择 -->
		<view class="content" style="margin-bottom: 10px;">
			<view class="dange_sel_box" v-for="(item, index) in tabList" :key="index" @click="tabsClick(item)">
				<text v-if="active != item.id" class="wsel_txt">{{ item.name }}</text>
				<text v-else class="sel_txt">{{ item.name }}</text>
				<view class="line_box" v-if="active == item.id"></view>
			</view>

		</view>

		<!-- 订单列表 -->
		<scroll-view scroll-y class="order_big_box" v-if="orderList.length > 0" @scrolltolower="lower()">
			<view class="dange_order_box" v-for="(item, index) in orderList" :key="index"
				@click="$noMultipleClicks(kanDetail, item)">
				<view class="orderNum_box">
					<view class="left_lv_box"></view>
					<view class="zs_order_num_box">订单编号：{{ item.first_order_sn }}</view>
					<view class="zhuangtai_box" v-if="active == '-2'">{{
			item.status == -1 ? '已退款' : item.status == 0 ? '已取消' : item.status == 1 ? '待支付' : item.status ==
				2 ? '待勘测' : item.status == 3 ? '待清运' : '已完成'
		}}</view>
				</view>
				<view class="zc_type_box">
					<view class="le_box">
						<view class="cc_box">
							<image :src="item.product_img" mode="scaleToFill" />
						</view>
						<view class="xx_box">
							<view class="xx_top_box">{{ item.product_name }}</view>
							<view class="xx_bot_box">
								按{{ item.category_name }}拉
								<view v-if="item.position_name"
									style="width: 8rpx;height: 8rpx;margin: 0 6rpx; border-radius: 50%;background-color: rgba(204, 204, 204, 1);">
								</view>
								<text v-if="item.position_name">{{ item.position_name }}</text>
							</view>
						</view>
					</view>
					<view class="r_box">
						<view class="daishu_box">
							<text style="color:rgba(255, 141, 26, 1);font-size: 20rpx;">¥</text>
							<text style="font-weight: 700;color:rgba(255, 141, 26, 1);font-size: 36rpx;">{{
			item.product_price }}</text>
							/{{ item.category_name }}
						</view>
						<view class="yg_box">预估{{ item.num * 1 }}{{ item.category_name }}</view>
					</view>
				</view>

				<view class="zclx_box">
					<view class="xing_box">
						<text style="margin-right: 14rpx;">{{ item.real_name }}</text> <text>{{ item.phone }}</text>
					</view>
					<view class="xing_box">
						<text style="margin-right: 14rpx;">时间：</text> <text>{{ item.appointment_time }}</text>
					</view>
					<view class="dizhi_box">
						<view>地址：</view>
						<view class="jt_box">{{ item.location }}</view>
						<view><u-icon name="map-fill" size="28" color="rgba(166, 166, 166, 1)"></u-icon></view>
					</view>
				</view>

				<view style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);">
				</view>


				<view class="yuyue" v-if="item.category_id == 2">预约车型：{{ item.vehicle_name }}</view>
				<!-- 待支付 -->
				<view class="prc_box" v-if="item.status == '1'">
					<view class="left_trxt_box">待支付定金：<text style="color: rgba(255, 141, 26, 1);">¥{{
			item.first_pay_money }}</text></view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
				</view>
				<!-- 待清运 -->
				<view class="prc_box" v-if="item.status == '3'">
					<view class="left_trxt_box">待结清金额：<text style="color: rgba(255, 141, 26, 1);">¥{{
			item.last_pay_money }}</text></view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
				</view>
				<!-- 待勘测 -->
				<view class="prc_box" v-if="item.status == '2'">
					<view class="left_trxt_box">已付定金：¥{{ item.first_pay_money }}</view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
				</view>
				<!-- 已取消 -->
				<view class="prc_box" v-if="item.status == '0'">
					<view class="left_trxt_box" style="color:rgba(54, 41, 125, 1)">订单已取消</view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
				</view>
				<!-- 已退款 -->
				<view class="prc_box" v-if="item.status == '-1'">
					<view class="left_trxt_box">退款成功：¥{{ item.first_pay_money }}
					</view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
				</view>
				<!-- 已完成 -->
				<view class="prc_box" v-if="item.status == '5'">
					<view class="left_trxt_box">订单总金额：¥{{ item.total_money }}
					</view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
				</view>
				<view style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);">
				</view>
				<!-- 待支付 -->
				<view class="prc_box" v-if="item.status == '1'">
					<view class="left_trxt_box"></view>
					<view style="display: flex;">
						<view class="czbtn1_box" @click.stop="orderCancelBtn(item)"
							style="border: 2rpx solid rgba(229, 229, 229, 1);color: rgba(56, 56, 56, 1);">取消订单</view>
						<view class="czbtn1_box" @click.stop="$noMultipleClicks(lookDetail, item)"
							style="background: rgba(26, 194, 121, 1);color: rgba(255, 255, 255, 1);margin-left: 20rpx;">
							去支付</view>
					</view>
				</view>
				<!-- 待清运 -->
				<view class="prc_box" v-if="item.status == '3'">
					<view class="left_trxt_box"></view>
					<view class="czbtn1_box" @click.stop="$noMultipleClicks(goDetail, item)"
						style="background: rgba(26, 194, 121, 1);color: rgba(255, 255, 255, 1);">去结清</view>
				</view>
				<!-- 待勘测 -->
				<view class="prc_box" v-if="item.status == '2'">
					<view class="left_trxt_box"></view>
					<view class="czbtn1_box" @click.stop="$noMultipleClicks(drawback, item)"
						style="border: 2rpx solid rgba(229, 229, 229, 1);color: rgba(56, 56, 56, 1);">申请退款</view>
				</view>
				<!-- 已取消 -->
				<!-- <view class="prc_box" v-if="item.status == '0'">
					<view class="left_trxt_box" style="color:rgba(54, 41, 125, 1)">订单已取消</view>
				</view> -->
				<!-- 已退款 -->
				<!-- <view class="prc_box" v-if="item.status == '-1'">
				</view> -->
				<!-- 已完成 -->
				<view class="prc_box" v-if="item.status == '5'">
					<view class="left_trxt_box"></view>
					<view class="czbtn1_box" @click.stop="$noMultipleClicks(kanDetail, item)">查看详情</view>
				</view>
			</view>
			<aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
				padding="" :loadTitle="loadTitle"></aLoadMore>
		</scroll-view>
		<view v-else>
			<empoy :imageUrl="'https://build.lwjcg.com/uploads/empty_order.png'" :kongtext="'您还没有预约订单哦'"></empoy>
			<view class="moreOrder_box" @click="goshop">去下单</view>
		</view>
	</view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
	components: {
		back, empoy
	},
	data() {
		return {
			loadStatus: 'normal',//加载状态down,loading,normal
			loadTitle: {
				down: "上拉加载更多",
				loading: "正在加载",
				normal: "没有更多了",
			},
			noClick: true,//防连点
			tabList: [],
			active: -2,//默认选中第一个
			status: -2,
			orderList: [],//订单列表
			page: 1,   // 第一页
			flag: true  // 防抖开关 防止用户不停的下拉
		}
	},
	onLoad(options) {
		this.tabSta()//订单状态
	},
	onHide() {
		this.active = uni.setStorageSync('active', -2)
		this.status = uni.setStorageSync('active', -2)

	},
	onShow() {
		if (uni.getStorageSync('lower') == false) {
			this.page = 1
			this.orderList = []
			this.active = uni.getStorageSync('active')
			this.status = uni.getStorageSync('active')
			if (uni.getStorageSync('USERINFO') != '') {
				this.orderInfo()//订单列表
			}
		}

	},
	methods: {
		tabsClick(item) {
			this.page = 1
			this.orderList = []
			this.active = item.id
			this.status = item.id
			console.log(item.id)
			if (uni.getStorageSync('USERINFO') != '') {
				this.orderInfo()//订单列表
			}
		},
		lower() {
			if (this.flag) {
				this.orderInfo();
			} else {
				this.loadStatus = 'normal'
			}

		},
		// 取消订单
		orderCancelBtn(item) {
			uni.showModal({
				title: '确定取消订单？',
				content: '',
				showCancel: true,
				success: (res) => {
					if (res.confirm) {
						let data = {
							order_id: item.id
						}
						this.$Request.post(this.$api.order.orderCancel, data).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '取消成功',
									icon: 'none'
								})
								setTimeout(() => {
									this.active = 0
									this.status = 0
									this.page = 1
									this.orderList = []
									this.orderInfo()
								}, 600)
							}
						})
					} else if (res.cancel) {
						console.log('取消')
					}
				}
			})

		},
		// 申请退款
		drawback(item) {
			uni.showModal({
				title: '确定退款？',
				content: '',
				showCancel: true,
				success: (res) => {
					if (res.confirm) {
						let data = {
							order_id: item.id
						}
						this.$Request.post(this.$api.order.orderRefund, data).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '退款成功',
									icon: 'none'
								})
								setTimeout(() => {
									this.active = -1
									this.status = -1
									this.page = 1
									this.orderList = []
									this.orderInfo()
									console.log('退款跳转')
								}, 600)
							}
						})
					} else if (res.cancel) {
						console.log('取消')
					}
				}
			})
		},
		// 去结清
		goDetail(item) {
			uni.navigateTo({
				url: '/orderPage/institutedetail?order_id=' + item.id + '&pay_status=' + this.status + '&subId=' + this.active
			})
		},
		// 查看详情
		kanDetail(item) {
			uni.setStorageSync('lower', false)
			uni.navigateTo({
				url: '/orderPage/institutedetail?order_id=' + item.id + '&pay_status=' + this.status + '&subId=' + this.active
			})
		},
		lookDetail(item) {

			let data = {
				order_id: item.id,
				category_id: item.category_id,
				position_id: item.position_id,
				product_id: item.product_id,
				num: item.num * 1,
				waste_id: item.waste_id,
				coupon_list_id: item.coupon_list_id,
				address_id: item.address_id,
				appointment_time: item.appointment_time,
				vehicle_id: item.vehicle_id
			}
			console.log(data)
			this.$Request.post(this.$api.order.orderAdd, data).then(res => {
				if (res.code == 200) {
					this.Payment(res.data)
				}
			})
		},

		// 拉起支付
		Payment(pay_data) {
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: pay_data.timeStamp.toString(),
				nonceStr: pay_data.nonceStr,
				signType: 'MD5',
				package: pay_data.package,
				paySign: pay_data.paySign,
				success(res) {
					console.log(res)
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/orderPage/successful/successful'
						})

						this.page = 1
						this.orderList = []
						this.orderInfo()
					}, 1000)
				},
				fail(err) {
					console.log(err)
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
					setTimeout(() => {
						this.active = '1'

						this.page = 1
						this.orderList = []
						this.orderInfo()
					}, 1000)
				}
			})
		},
		tabSta() {
			this.$Request.post(this.$api.order.orderStatus).then(res => {
				if (res.code == 200) {
					var tabList = []
					tabList = res.data
					tabList.unshift({ id: -2, name: '全部' })
					this.tabList = tabList
				}

			})
		},
		orderInfo() {//订单列表
			if (this.status == -2) {
				this.status = 'all'
			}
			let data = {
				status: this.status,
				page: this.page,
			}
			// uni.showLoading({
			// 	title: '加载中',
			// 	mask: 'none'
			// })
			this.loadStatus = 'loading'
			this.$Request.post(this.$api.order.orderList, data).then(res => {
				if (res.code == 200) {
					this.loadStatus = 'down'
					var orderList = res.data.data;
					this.page++;
					this.orderList = this.orderList.concat(orderList);
					if (orderList.length < 20) {
						this.flag = false
						this.loadStatus = 'normal'
					} else {
						this.flag = true
					}
				}
			})

		},

		goOriderDetail() {
			uni.navigateTo({
				url: '/pages/order/orderDetail'
			})
		},
		goshop() {
			uni.switchTab({ url: '/pages/index/index' })
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	width: 100vw;
	min-height: 100vh;
	background-color: rgba(246, 246, 246, 1);

	::-webkit-scrollbar {
		display: none;
	}

	.content {
		width: 100%;
		height: 92rpx;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow: auto;

		.dange_sel_box {
			margin-right: 10rpx;
			width: 100rpx;
			height: 94rpx;
			flex-shrink: 0;
			line-height: 94rpx;
			text-align: center;
			position: relative;

			.wsel_txt {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
			}

			.sel_txt {
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(0, 0, 0, 1);
			}

			.line_box {
				width: 76rpx;
				height: 3.93rpx;
				background: rgba(26, 194, 121, 1);
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;

			}

		}
	}

	.subsection_box {
		width: 100%;
		height: 92rpx;
		box-sizing: border-box;
		padding: 0 54rpx;
		display: flex;
		justify-content: space-between;
		background-color: rgba(255, 255, 255, 1);
		margin-bottom: 20rpx;

		.sub_text_box {
			height: 92rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			line-height: 92rpx;
			color: rgba(128, 128, 128, 1);


			&.sub_text_boxact {
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}

			.wenzi {
				width: 200rpx;
				position: relative;

				&.wenzi_1 {
					text-align: left;
				}

				&.wenzi_2 {
					text-align: center;

				}

				&.wenzi_3 {
					text-align: right;
				}

				.sub_line {
					position: absolute;
					width: 76rpx;
					height: 4rpx;
					background: rgba(26, 194, 121, 1);
					bottom: 2rpx;



					&.sub_line_1 {
						left: 6%;
					}

					&.sub_line_2 {
						left: 0;
						right: 0;
						margin: auto;
					}

					&.sub_line_3 {
						right: 20%;
					}

				}
			}


		}
	}

	.order_big_box {
		width: 100%;
		height: calc(100vh - 290rpx);

		.dange_order_box {
			width: 700rpx;
			// height: 628rpx;
			border-radius: 26rpx;
			background: rgba(255, 255, 255, 1);
			margin: auto;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.orderNum_box {
				width: 100%;
				height: 90rpx;
				border-bottom: 2rpx solid rgba(245, 245, 245, 1);
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;

				.left_lv_box {
					width: 6rpx;
					height: 22rpx;
					background: rgba(26, 194, 121, 1);
					margin-right: 30rpx;

				}

				.zs_order_num_box {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.zhuangtai_box {
					position: absolute;
					right: 28rpx;
					top: 26rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(26, 194, 121, 1);
				}
			}

			.zc_type_box {
				width: 100%;
				height: 154rpx;
				border-bottom: 2rpx solid rgba(245, 245, 245, 1);
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.le_box {
					width: 50%;
					height: 88rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					box-sizing: border-box;
					padding-left: 34rpx;

					.cc_box {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
						background-color: #e8fcee;
						margin-right: 22rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.xx_box {
						height: 88rpx;

						.xx_top_box {
							width: 180rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							// font-weight: 500;
							line-height: 40rpx;
						}

						.xx_bot_box {
							height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							// font-weight: 500;
							line-height: 40rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
					}
				}

				.r_box {

					width: 50%;
					height: 88rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.daishu_box {
						height: 88rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 88rpx;
						color: rgba(0, 0, 0, 1);
					}

					.yg_box {
						height: 88rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 92rpx;
						color: rgba(0, 0, 0, 1);
					}
				}
			}

			.zclx_box {
				width: 100%;
				height: 204rpx;
				box-sizing: border-box;
				padding-left: 36rpx;
				padding-top: 32rpx;

				.xing_box {
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: rgba(0, 0, 0, 1);
					margin-bottom: 16rpx;
				}

				.dizhi_box {
					width: 100%;
					height: 40rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.jt_box {
						width: 436rpx;
						margin-left: 10rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}
				}
			}

			.yuyue {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				box-sizing: border-box;
				padding-left: 34rpx;
				font-size: 28rpx;
				// font-weight: 500;
				color: rgba(0, 0, 0, 1);
				border-bottom: 2rpx solid rgba(245, 245, 245, 1);
			}

			.prc_box {
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				padding: 0 24rpx 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left_trxt_box {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: rgba(0, 0, 0, 1);
				}

				.left_trxt1_box {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
					margin-right: 50rpx;
				}

				.czbtn_box {
					width: 220rpx;
					height: 56rpx;
					border-radius: 12rpx;
					border: 2rpx solid rgba(26, 194, 121, 1);
					text-align: center;
					line-height: 56rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(26, 194, 121, 1);


				}

				.czbtn1_box {
					width: 168rpx;
					height: 56rpx;
					border-radius: 12rpx;
					border: 2rpx solid rgba(26, 194, 121, 1);
					text-align: center;
					line-height: 52rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(26, 194, 121, 1);


				}
			}

		}
	}

	.moreOrder_box {
		width: 260rpx;
		height: 80rpx;
		border-radius: 18rpx;
		border: 2rpx solid rgba(26, 194, 121, 1);
		line-height: 80rpx;
		text-align: center;
		margin: auto;
		margin-top: 68rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 76rpx;
		color: rgba(26, 194, 121, 1);


	}
}
</style>